<template>
  <div>
    <div class="botInfo">
      <div class="banner">
        <client-carousel arrows="never" :url="banner" />
        <div class="content_con">
          <div
            class="content_con_item"
            v-for="(item, index) in describeList"
            :key="index"
          >
            <img :src="item.icon" style="width: 38px; height: 30px" />
            <div class="itemTitle">{{ item.title }}</div>
            <div class="itemCon">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="min-container">
          <client-title title="云服务器" class="content-title" />
          <div>为企业级用户提供优质的服务器选择的权利</div>
          <div class="learnMore">
            <span @click="handleBuy('buy')">立即购买</span>
            <span @click="handleBuy('count')">价格计算器</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getAssetURL } from "@/utils/load_assets";
import ClientTitle from "@/components/client-title/client-title.vue";
import isLogin from "@/utils/staic";

import { useRouter } from "vue-router";
const router = useRouter();

const bannerUrl = getAssetURL("client/solution/image57.png");
const banner = ref<any>([{ url: bannerUrl }])
const describeList = ref<any>([
  {
    icon: new URL("@/assets/img/client/solution/ani-service1.png", import.meta.url).href,
    title: "稳定可靠",
    content:
      "故障自动迁移，服务可用性可达99.99%，数据多副本，数据持久性达99.999%，支持云服务器和云硬盘的备份和恢复",
  },
  {
    icon: new URL(
      "@/assets/img/client/solution/3cc40abb12d2cb2d61f0b3313a8fb3d31.png",
      import.meta.url
    ).href,
    title: "购买时间越长，付费越少",
    content:
      "对于业务需求确定的业务场景，购买周期服务可以节约成本，最多可节约50%，购买周期越长，享受的折扣越大",
  },
  {
    icon: new URL(
      "@/assets/img/client/solution/190d939adb7fc1d131adf2f1bba6110d1.png",
      import.meta.url
    ).href,
    title: "使用量越多，付费越少",
    content:
      "华为云提供多种形式的服务量纲，对于OBS等服务而言，华为云为用户提供了多阶梯的资源包，多阶梯定价意味着使用量越多，那么您为每GB支付的费用就越少",
  },
]);

// 立即购买
const handleBuy = (type) => {
  if (isLogin.value === null) {
    router.push("/login");
  } else {
    router.push({
      path: "/client/cloudService/components/shoppingHome",
      query: { type }
    });
  }
};
</script>
<style lang="less" scoped>
.botInfo {
  position: relative;
  margin-bottom: 0;
  background: #2066f4;
  .banner {
    width: 100%;
    margin-bottom: 100px;
    .content_con {
      display: flex;
      width: 70%;
      height: 220px;
      background: #ffffff;
      z-index: 99;
      position: absolute;
      bottom: -150px;
      transform: translate(-50%);
      left: 50%;
      border-radius: 10px;
      padding: 20px;
      .content_con_item {
        flex: 1;
        border-right: 2px solid #b2b2b2;
        display: flex;
        flex-direction: column;
        padding: 0 30px;
        align-items: center;
        justify-content: space-between;
        .itemTitle {
          font-size: 20px;
          font-weight: 600;
        }
        .itemCon {
          font-size: 14px;
          font-weight: 400;
          color: #777777;
        }
      }
      .content_con_item:nth-last-child(1) {
        border-right: none;
      }
    }
  }
  .main {
    position: absolute;
    top: 0;
    width: 100%;

    .content-title {
      text-align: left;
      margin: 40px 0;
      color: #313131;
    }

    .min-container {
      margin-top: 70px;
      .learnMore {
        margin-top: 60px;
        span:nth-child(1) {
          background-color: #4098ff;
          margin-right: 20px;
          color: #ffffff;
        }
        span:nth-child(2) {
          background-color: #ffffff;
          color: #313131;
        }
        span {
          padding: 10px 60px;
          transition: all 0.3s;
          &:hover {
            cursor: pointer;
            background-color: #66cafe;
            color: #ffffff;
          }
          &:active {
            background-color: #57b3e4;
          }
        }
      }
    }
  }
}
</style>
